<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>课程首页</title>
    <style>
        .course-container { display: flex; flex-wrap: wrap; }
        .course-card { width: 200px; margin: 10px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; }
        .course-card img { width: 100%; height: 150px; object-fit: cover; }
        .pagination { margin: 20px 0; }
        .pagination a { padding: 8px 16px; text-decoration: none; border: 1px solid #ddd; }
        .pagination a.active { background-color: #4CAF50; color: white; }
        .btn-add { padding: 8px 15px; background-color: #4CAF50; color: white; text-decoration: none; border-radius: 4px; }
    </style>
</head>
<body>
<h2>课程列表</h2>
<a href="${pageContext.request.contextPath}/course/add" class="btn-add">添加课程</a>

<div class="course-container">
    <c:forEach items="${courseList}" var="course">
        <div class="course-card">
            <img src="${course.image}" alt="${course.name}">
            <h3>${course.name}</h3>
            <p>价格: ${course.price}</p>
            <p>类型: ${course.type}</p>
            <a href="${pageContext.request.contextPath}/course/detail/${course.courseid}">查看详情</a>
        </div>
    </c:forEach>
</div>

<div class="pagination">
    <c:if test="${currentPage > 1}">
        <a href="${pageContext.request.contextPath}/course/findByPage?page=${currentPage-1}">上一页</a>
    </c:if>

    <c:forEach begin="1" end="${totalPage}" var="i">
        <a href="${pageContext.request.contextPath}/course/findByPage?page=${i}"
           <c:if test="${i == currentPage}">class="active"</c:if>>${i}</a>
    </c:forEach>

    <c:if test="${currentPage < totalPage}">
        <a href="${pageContext.request.contextPath}/course/findByPage?page=${currentPage+1}">下一页</a>
    </c:if>
</div>
</body>
</html>